import React, {forwardRef} from 'react';
import clsx from 'clsx';
import InputMask from 'react-input-mask';
import {AtSign, Captions, KeyRound} from "lucide-react";

import styles from './Input.module.css';

export type TypeInputProps = {
    id: string;
    name: string;
    label: string;
    type?: string;
    mask?: string;
    kind: 'email' | 'password' | 'registration_number' | 'none';
    placeholder?: string;
} & React.InputHTMLAttributes<HTMLInputElement>;

const Input = forwardRef<HTMLInputElement, TypeInputProps>(
    (
        {
            id,
            name,
            label,
            type,
            kind,
            mask,
            placeholder,
            ...props
        },
        ref
    ) => {

        const inputStyles = {
            email: {style: '', icon: <AtSign className={styles.login_icon} size={25}/>},
            password: {style: '', icon: <KeyRound className={styles.login_icon} size={25}/>},
            registration_number: {
                style: styles.registration_number,
                icon: <Captions className={styles.login_icon} size={25}/>
            },
            none: {style: '', icon: null},
        };

        const InputComponent = mask ? (
            <InputMask
                mask={mask}
                maskChar=""
                name={name}
                placeholder={placeholder}
                className={clsx(styles.input, {[inputStyles[kind].style]: kind})}
                inputRef={ref as any} // Преобразуем ref в любой тип для передачи в InputMask
                {...props}
            />
        ) : (
            <input
                id={id}
                ref={ref}
                name={name}
                type={type}
                placeholder={placeholder}
                className={clsx(styles.input, {[inputStyles[kind].style]: kind})}
                {...props}
            />
        );

        return (
            <div className={styles.container}>
                <label htmlFor={id} className={styles.label}>
                    {label}
                </label>
                <div className={styles.inputWrapper}>
                    {kind !==  'none' && <span className={styles.inputIcon}>{inputStyles[kind].icon}</span>}
                    {InputComponent}
                </div>
            </div>
        );
    }
);

export default Input;
